@use "../../variables" as *;

svc-page-navigator-item,
.svc-page-navigator-item {
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.svc-page-navigator-item-content {
  display: flex;
  padding: var(--ctr-page-navigator-item-padding-top, var(--sjs-spacing-x1))
    var(--ctr-page-navigator-item-padding-right, var(--sjs-spacing-x125))
    var(--ctr-page-navigator-item-padding-bottom, var(--sjs-spacing-x1))
    var(--ctr-page-navigator-item-padding-left, var(--sjs-spacing-x125));
  gap: var(--ctr-page-navigator-item-gap, var(--sjs-spacing-x1));
  justify-content: flex-end;
  align-items: center;
  position: relative;

  &:hover,
  &:focus {
    outline: none;
  }
}

.svc-page-navigator__items--up {
  .svc-page-navigator-item-content {
    transition: 0.25s ease-in-out;
    transform: translateY(-100%);
  }

  svc-page-navigator-item:first-child .svc-page-navigator-item-content {
    opacity: 0;
  }
}

.svc-page-navigator__items--down {
  .svc-page-navigator-item-content {
    transition: 0.25s ease-in-out;
    transform: translateY(100%);
  }

  svc-page-navigator-item:last-child .svc-page-navigator-item-content {
    opacity: 0;
  }
}

.svc-page-navigator-item__dot {
  display: flex;
  width: var(--ctr-page-navigator-item-dot-container-width, var(--sjs-font-size-x250));
  height: var(--ctr-page-navigator-item-dot-container-height, var(--sjs-font-size-x250));
  justify-content: center;
  align-items: center;
}

.svc-page-navigator-item__dot-content {
  width: var(--ctr-page-navigator-item-dot-radius-small, var(--sjs-font-size-x075));
  height: var(--ctr-page-navigator-item-dot-radius-small, var(--sjs-font-size-x075));
  flex-shrink: 0;
  background: var(--ctr-page-navigator-item-dot-color-default, var(--sjs-layer-3-foreground-75, #000000bf));
  border-radius: var(--ctr-page-navigator-item-dot-radius-small, var(--sjs-font-size-x075));
  box-sizing: content-box;
}

.svc-page-navigator-item__banner {
  @include textEllipsis;
  padding: var(--ctr-page-navigator-item-padding-top, var(--sjs-spacing-x1))
    var(--ctr-page-navigator-item-padding-right, var(--sjs-spacing-x125))
    var(--ctr-page-navigator-item-padding-bottom, var(--sjs-spacing-x1))
    var(--ctr-page-navigator-item-padding-left-hovered, var(--sjs-spacing-x2));
  justify-content: flex-end;
  align-items: center;
  gap: var(--ctr-page-navigator-item-gap, var(--sjs-spacing-x1));
  border-radius: var(--ctr-page-navigator-item-corner-radius, var(--sjs-corner-radius-x075));
  background: var(--ctr-page-navigator-item-background-color-hovered, var(--sjs-layer-1-background-500, #ffffffff));

  box-shadow:
    var(--ctr-page-navigator-item-shadow-hovered-1-offset-x, 0px)
      var(--ctr-page-navigator-item-shadow-hovered-1-offset-y, 2px)
      var(--ctr-page-navigator-item-shadow-hovered-1-blur, 8px)
      var(--ctr-page-navigator-item-shadow-hovered-1-spread, 0px)
      var(--ctr-page-navigator-item-shadow-hovered-1-color, var(--sjs-special-glow, #004c441a)),
    var(--ctr-page-navigator-item-shadow-hovered-2-offset-x, 0px)
      var(--ctr-page-navigator-item-shadow-hovered-2-offset-y, 1px)
      var(--ctr-page-navigator-item-shadow-hovered-2-blur, 2px)
      var(--ctr-page-navigator-item-shadow-hovered-2-spread, 0px)
      var(--ctr-page-navigator-item-shadow-hovered-2-color, var(--sjs-special-shadow, #00000040));
  opacity: 0;
  transition: opacity $creator-transition-duration;

  position: absolute;
  top: 0;
  right: 0;
  z-index: 15;
  display: none;

  .svc-page-navigator-item__dot-content {
    width: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-font-size-x1));
    height: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-font-size-x1));
    flex-shrink: 0;
    background: var(--ctr-page-navigator-item-dot-color-hovered, var(--sjs-primary-background-500, #19b394ff));
    border-radius: 100%;
  }
}

.svc-page-navigator-item__text {
  @include ctrSmallBoldFont;
  color: var(--ctr-page-navigator-item-text-color-hovered, var(--sjs-layer-1-foreground-100, #000000e6));
}

.svc-page-navigator-item--selected {
  .svc-page-navigator-item__dot-content {
    width: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-font-size-x1));
    height: var(--ctr-page-navigator-item-dot-radius-large, var(--sjs-font-size-x1));
    flex-shrink: 0;
    background: var(--ctr-page-navigator-item-dot-color-selected, var(--sjs-special-background, #edf9f7ff));
    border-style: solid;
    border-width: 2px;
    border-color: var(--ctr-page-navigator-item-dot-border-color-selected, var(--sjs-layer-3-foreground-75, #000000bf));
  }
}

.svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover,
.svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus {

  .svc-page-navigator-item__banner {
    display: flex;
    opacity: 1;
  }
}

.svc-creator__toolbox--right,
[dir='rtl'],
[style*='direction:rtl'],
[style*='direction: rtl'] {
  .svc-page-navigator-item__banner {
    right: unset;
    left: 0;
    padding: var(--ctr-page-navigator-item-padding-top, var(--sjs-spacing-x1))
      var(--ctr-page-navigator-item-padding-left-hovered, var(--sjs-spacing-x2))
      var(--ctr-page-navigator-item-padding-bottom, var(--sjs-spacing-x1))
      var(--ctr-page-navigator-item-padding-left, var(--sjs-spacing-x125));
    direction: rtl;

    .svc-page-navigator-item__dot {}
  }
}